<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label>{{ count }}</label>
    <div>getter - doubleCount: {{ doubleCount }}</div>
    <br />
    <button @click="addCountN(-1)">值 - 1</button>
    <button @click="asyncAddCountN(-10)">1秒后-10</button>
    <button @click="onSetAge">setAge</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['addCountN']),
    ...mapActions(['asyncAddCountN']),
    onSetAge () {
      this.$store.commit('setAge') // 调到哪里去了呢？
      // this.$store.commit('user/setAge')
    }
    // 注意：在定义其他方法前，先观察一下辅助函数中是否有同名的方法，别命名冲突了，比如，下面这个方法就会覆盖上面的辅助函数
    // addCountN () {
    //   console.log('自己的addCountN方法')
    // },
    // sub () {
    //   this.$store.commit('addCountN', -1)
    //   // 如果要传多个参数，咋办？
    //   // this.$store.commit('addCountN', -1, -2, -3) // 这种方式，只能将 -1 传过去，因为 mutation 只能接收一个参数
    //   // 用组合成数组或者对象 作为一个参数 传过去，比如，下面两种形式：
    //   // this.$store.commit('addCountN', [-1, -2, -3])
    //   // this.$store.commit('addCountN', { count1: -1, count2: -2, count3: -3 })
    // }
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
